<script setup lang="ts">
import { CloseOutlined } from '@vicons/material'
import { NIcon } from 'naive-ui'
import SvgIcon from '@/components/SvgIcon/index.vue'
const emit = defineEmits(['close', 'fullScreen'])
const props = defineProps<{
  isFullScreen: boolean
  isDefault: boolean
  chatTitle: string
}>()
</script>

<template>
  <div :class="{ 'bg-full-screen': props.isFullScreen }" class="deepseek-chat-header h-[56px] leading-[56px] flex pr-6">
    <div class="h-4 leading-4 flex items-center pr-6 absolute right-0 top-5">
      <n-icon @click="emit('fullScreen')" class="cursor-pointer mr-3 flex items-center" size="16" color="#868F9C">
        <SvgIcon class="text-[16px]" :name="!props.isFullScreen ? 'full-screen' : 'full-screen-exit'" />
      </n-icon>
      <n-icon @click="emit('close')" class="cursor-pointer" size="16" color="#868F9C">
        <CloseOutlined />
      </n-icon>
    </div>
    <div v-if="!props.isDefault" class="bg-full-screen-title" :title="props.chatTitle">{{ props.chatTitle }}</div>
  </div>
</template>

<style lang="less" scoped>
.bg-full-screen {
  background: #00000050;
  color: #F5F9FF;
  font-size: 16px;
  text-align: center;
  font-family: 'PingFang SC';

  &-title {
    max-width: 784px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

